<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
    <title>html5手机移动端转盘抽奖</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<script src="../js/tween.js" type="text/javascript" charset="utf-8"></script>
<body>
    <!--
    实现要求：
    1、有且仅有3次抽奖机会;
    2、开始抽奖，指针随机转5-10圈（每圈360deg，即转的度数为1800-3600之间任意数）;
    3、要求把抽奖次数记录下来，把页面关掉重新打开依然有效；
    -->
    <div class="box">
        <div class="turnplate">
            <div class="prize"></div>
            <div class="pointer"></div>
        </div>
    </div>
    <p style="cursor: pointer;">充值金币</p>
</body>
<script type="text/javascript">
	var pointer = document.getElementsByClassName("pointer")[0];
	var prize = document.getElementsByClassName("prize")[0];
	var ppp = document.getElementsByTagName("p")[0];
	function suijishu(){
		return parseInt(Math.random()*1801 + 1800);
	}
	var i = 0;
	var value;
	if(localStorage.getItem('key') == null){
		value = 0;
	}else{
		value = localStorage.getItem('key');
	}
	pointer.addEventListener("click",clickFn,false);
	localStorage.setItem("key",value);
	ppp.onclick = function(){
		alert("恭喜您充值三次，下课请把钱打到我的账上，谢谢!")
		localStorage.removeItem("key",value);
		value = 0;
		localStorage.setItem("key",value);
		bol = true;
	}
	var bol = true;
	function clickFn(){
		if(bol){
			if(value >= 3){
				alert("您的金币已花完，请继续充值!");
				return;
			}else{
				bol = false;
				clearInterval(timer);
				value++;
				localStorage.setItem("key",value);
				var t= 0;
				var b = 0;
				var c = suijishu();
				var d = 200;
				var timer = setInterval(function(){
					t++;
					if(t >= d){
						bol = true;
						var num = c%360;
						if(num <= 18 && num >= 0){
							alert("30M免费流量")
						}else if(num > 18 && num <= 54){
							alert("20闪币");
						}else if(num > 54 && num <= 90){
							alert("20M免费流量");
						}else if(num > 90 && num <= 126){
							alert("10M免费流量");
						}else if(num > 126 && num <= 162){
							alert("5闪币");
						}else if(num > 162 && num <= 198){
							alert("谢谢参与");
						}else if(num > 198 && num <= 234){
							alert("10闪币");
						}else if(num > 234 && num <= 270){
							alert("50M免费流量");
						}else if(num > 270 && num <= 306){
							alert("2闪币");
						}else if(num > 306 && num <= 342){
							alert("100M免费流量");
						}else if(num > 342 && num <= 360){
							alert("30M免费流量");
						}
						clearInterval(timer);			
					}
//					prize.style.transform = "translate(-50%,-50%) rotate(" + Tween.Quint.easeInOut(t,b,c,d) + "deg)";
//					用cssText更好用，就跟直接写css样式一样，不过要注意字符串的拼接。还有兼容问题。你写什么，就会替换什么。
					prize.style.cssText = "-webkit-transform: translate(-50%,-50%) rotate(" + Tween.Quint.easeInOut(t,b,c,d) + "deg)";
				},20)
			}
		}	
	}
</script>
</html>
